<template>
  <van-nav-bar title="分销佣金" left-text="" left-arrow @click-left="goBack" />
  <div class="green">
    <div class="info">
      <div>可提现(元)：<span>{{canGetMoney}}</span></div>
      <div>累计提现(元)：<span>{{Money.value}}</span></div>
    </div>
    <van-button round type="default" class="btn" @click="onSubmit">立即提现</van-button>
  </div>
  <div class="out">
    <!-- 分销会员买的商品 -->
    <div class="item" v-for="item in info">
      <van-image
        round
        fit="cover"
        width="5vh"
        height="5vh"
        :src="item.business.avatar_text"
      />
      <div class="text">
        <h4>订单号：{{item.order.code}}</h4>
        <p>{{item.createtime}}</p>
      </div>
      <div class="time">
        <div v-if="item.status=='0'">未提现</div>
        <div v-if="item.status=='1'">已提现</div>
        <h4>￥{{item.amount}}</h4>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const Money = reactive({
  value: parseFloat(proxy.$cookies.get("Money") ?? 0)
});

const info =ref([])
// 可提现金额
const canGetMoney=ref(0);

onBeforeMount(() => {
  getMemberData()
})
const getMemberData = async () => {
  let result = await Api.Commission({busid: LoginUser.id})
  if (result.code == 1) {
    info.value=result.data
    info.value.forEach(item => {
      if(item.status=='0'){
        canGetMoney.value+=parseFloat(item.amount)
      }
    });
    console.log(info.value);
  }
}


// 提现功能
const onSubmit = async ()=>{
  let comlist=[];
  info.value.forEach(item => {
    if(item.status=='0'){
      comlist.push(item.id)
    }
  });

  let res=await Api.GetCash({
    busid: LoginUser.id,
    comlist:JSON.stringify(comlist),
    amount:canGetMoney.value
  })
  if (res.code == 1) {
    canGetMoney.value=0
    Money.value+=parseFloat(res.data)
    proxy.$cookies.set("Money", Money.value);
    showSuccessToast({
        message: res.msg
    })
    getMemberData()
  }
}
</script>

<style scoped>
.out{
  width: 100%;
  height: 95vh;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  align-items: center;
  box-sizing: border-box;
  padding: 2vh 0;
}
.item{
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 1.2rem 1rem;
  margin-bottom: 1vh;
  background-color: #ffffff;
  border-radius: 8px;
}
.item .text{
  width: 50%;
  font-size: 0.8rem;
  margin: 0 1vh;
}
.item .text p{
  font-size: 0.7rem;
  color: #969696;
}
.item .time{
  width: 30%;
  font-size: 0.8rem;
  color: #3e3e3e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item .time div{
  text-align: center;
  color: #626262;
}
.item .time h4{
  font-size: 1.2rem;
  color: #fe4343;
}
.item div{
  width: 100%;
  text-align: left;
}
.van-image img{
  width: 5vh;
  height: 5vh;
}

.green{
  width: 100%;
  height: 10vh;
  background-color: #8bc34a;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0 2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.green .info{
  text-align: left;
}
.green .info div:nth-child(2){
  margin-top: 0.5vh;
}
.green .info span{
  font-size: 1.5rem;
}
.green .btn{
  background-color: #323332;
  color: #ffffff;
  border: none;
}
</style>